<template>
  <div class="upload-btn">
    <Icon type="ios-image-outline" size="18"></Icon>
    <Upload
      :format="['jpg', 'jpeg', 'png']"
      :max-size="2048"
      :show-upload-list="false"
      :action="flowUploadURL"
      :data="form"
      :headers="{
        Authorization: token
      }"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      name="upload"
    >
      <div class="upload-text"><Icon v-if="!tempFile" type="md-cloud-upload" size="16"></Icon>{{ tempFile || '上传图片'}}</div>
    </Upload>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { flowUploadURL } from '@/api/modules/flow';
const token = localStorage.getItem('uk.token')
const props = defineProps({
  nodeID: {
    type: String,
    default: '',
  },
  modelValue: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['input:modelValue'])

const form = ref({
  id: props.nodeID,
});
const tempFile = ref('');

const loading = ref(false);
const handleSuccess = (res, file) => {
  console.log(res, file);
  loading.value = false;
};
const handleProgress = (event, file, fileList) => {
  tempFile.value = file.name;
  loading.value = file.status == 'uploading';
  console.log(event, file, tempFile.value);
};
</script>
<style lang="scss" scoped>
.upload-btn {
  display: flex;
  align-items: center;
  border: 1px solid #cfd2df;
  border-radius: 4px;
  height: 26px;
  padding: 0 2px;
  .ivu-icon-ios-folder-outline {
    padding: 0 4px;
    border-right: 1px solid #cfd2df;
    height: 100%;
    line-height: 26px;
  }
  .ivu-upload {
    height: 100%;
    flex: 1;
    :deep(.ivu-upload-select) {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
    }
  }
}

.upload-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
  text-align: center;
}
</style>
